﻿<section id="forms">
    <div class="page-header">
        <h1>Forms</h1>
    </div>

    <div class="row">
        <div class="span6">
            <form class="form-horizontal">
                <fieldset>
                    <legend>Horizontal forms</legend>
            
                    <div class="control-group">
                        <label class="control-label" for="input01">Text input</label>
                        <div class="controls">
                            <input type="text" class="t-input" id="input01">
                            <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="input02">Text input</label>
                        <div class="controls">
                            <input type="text" class="t-input" id="input02">
                            <span class="help-inline">In addition to freeform text, any HTML5 text-based input appears like so.</span>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="input02">Text input</label>
                        <div class="controls">
                            <label class="radio">
                                <input type="radio" />
                                test me
                            </label>
                            <input type="text" class="t-input" id="input02" style="width:75px">
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="optionsCheckbox">Checkbox</label>
                        <div class="controls">
                            <label class="checkbox">
                            <input type="checkbox" id="optionsCheckbox" class="t-input" value="option1">
                            Option one is this and that—be sure to include why it's great
                            </label>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="select01">Select list</label>
                        <div class="controls">
                            <select id="select01" class="t-input">
                                <option>something</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="multiSelect">Multicon-select</label>
                        <div class="controls">
                            <select multiple="multiple" class="t-input" id="multiSelect">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                    </div>
            
                    <div class="control-group">
                        <label class="control-label" for="fileInput">File input</label>
                        <div class="controls">
                            <input class="input-file t-input" id="fileInput" type="file">
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="textarea">Textarea</label>
                        <div class="controls">
                            <textarea class="t-input" id="textarea" rows="3"></textarea>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="optionsCheckboxList">Checkboxes</label>
                        <div class="controls">
                            <label class="checkbox">
                                <input type="checkbox" name="optionsCheckboxList1" value="option1">
                                Option one is this and that—be sure to include why it's great
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" name="optionsCheckboxList2" value="option2">
                                Option two can also be checked and included in form results
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" name="optionsCheckboxList3" value="option3">
                                Option three can—yes, you guessed it—also be checked and included in form results
                            </label>
                    
                            <p class="help-block"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="prependedInput">Prepended text</label>
                        <div class="controls">
                            <div class="input-prepend">
                                <span class="add-on">@@</span>
                                <input class="t-input" id="prependedInput" type="text">
                                <span class="help-inline">Here's some help text</span>
                            </div>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="appendedInput">Appended text</label>
                        <div class="controls">
                            <div class="input-append">
                                <input class="t-input" id="appendedInput" size="16" type="text">
                                <span class="add-on">.00</span>
                            </div>

                            <p class="help-block">Here's more help text</p>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="inlineCheckboxes">Inline checkboxes</label>
                        <div class="controls">
                            <label class="checkbox inline">
                                <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
                            </label>

                            <label class="checkbox inline">
                                <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
                            </label>

                            <label class="checkbox inline">
                                <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
                            </label>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">Radio buttons</label>
                        <div class="controls">
                            <label class="radio">
                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
                                Option one is this and that—be sure to include why it's great
                            </label>
                            <label class="radio">
                                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                Option two can is something
                            </label>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">Save changes</button>
                        <button class="btn">Cancel</button>
                    </div>
                </fieldset>
            </form>
        </div>
        <div class="span6">
            <form>
                <fieldset>
                    <legend>Vertical forms</legend>
            
                    <div class="control-group">
                        <label class="control-label" for="input01">Text input</label>
                        <div class="controls">
                            <input type="text" class="t-input" id="input01">
                            <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
                        </div>
                    </div>

            

                    <div class="control-group">
                        <label class="control-label" for="input02">Text input</label>
                        <div class="controls">
                            <input type="text" class="t-input" id="input02">
                            <span class="help-inline">In addition to freeform text, any HTML5 text-based input appears like so.</span>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="optionsCheckbox">Checkbox</label>
                        <div class="controls">
                            <label class="checkbox">
                            <input type="checkbox" id="optionsCheckbox" class="t-input" value="option1">
                            Option one is this and that—be sure to include why it's great
                            </label>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="select01">Select list</label>
                        <div class="controls">
                            <select id="select01" class="t-input">
                                <option>something</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="multiSelect">Multicon-select</label>
                        <div class="controls">
                            <select multiple="multiple" class="t-input" id="multiSelect">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                    </div>
            
                    <div class="control-group">
                        <label class="control-label" for="fileInput">File input</label>
                        <div class="controls">
                            <input class="input-file t-input" id="fileInput" type="file">
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="textarea">Textarea</label>
                        <div class="controls">
                            <textarea class="t-input" id="textarea" rows="3"></textarea>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="optionsCheckboxList">Checkboxes</label>
                        <div class="controls">
                            <label class="checkbox">
                                <input type="checkbox" name="optionsCheckboxList1" value="option1">
                                Option one is this and that—be sure to include why it's great
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" name="optionsCheckboxList2" value="option2">
                                Option two can also be checked and included in form results
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" name="optionsCheckboxList3" value="option3">
                                Option three can—yes, you guessed it—also be checked and included in form results
                            </label>
                    
                            <p class="help-block"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="prependedInput">Prepended text</label>
                        <div class="controls">
                            <div class="input-prepend">
                                <span class="add-on">@@</span>
                                <input class="t-input" id="prependedInput" type="text">
                                <span class="help-inline">Here's some help text</span>
                            </div>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="appendedInput">Appended text</label>
                        <div class="controls">
                            <div class="input-append">
                                <input class="t-input" id="appendedInput" size="16" type="text">
                                <span class="add-on">.00</span>
                            </div>

                            <p class="help-block">Here's more help text</p>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="inlineCheckboxes">Inline checkboxes</label>
                        <div class="controls">
                            <label class="checkbox inline">
                                <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
                            </label>

                            <label class="checkbox inline">
                                <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
                            </label>

                            <label class="checkbox inline">
                                <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
                            </label>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">Radio buttons</label>
                        <div class="controls">
                            <label class="radio">
                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
                                Option one is this and that—be sure to include why it's great
                            </label>
                            <label class="radio">
                                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                Option two can is something
                            </label>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">Save changes</button>
                        <button class="btn">Cancel</button>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="span6">
            <form class="form-horizontal">
                <fieldset>
                    <legend>Form control states</legend>

                    <div class="control-group">
                        <label class="control-label" for="normalInput">input</label>
                        <div class="controls">
                            <input class="t-input" id="normalInput" type="text" value="">
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="focusedInput">Focused input</label>
                        <div class="controls">
                            <input class="focused t-input" id="focusedInput" type="text" value="This is focused…">
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">Uneditable input</label>
                        <div class="controls">
                            <span class="uneditable-input t-input">Some value here</span>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="disabledInput">Disabled input</label>
                        <div class="controls">
                            <input class="disabled t-input" id="disabledInput" type="text" placeholder="Disabled input here…" disabled="">
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="optionsCheckbox1">checkbox</label>
                        <div class="controls">
                            <label class="checkbox">
                                <input type="checkbox" class="t-input" id="optionsCheckbox1" value="option1">
                                This is a default checkbox
                            </label>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="optionsCheckboxFocused">focused checkbox</label>
                        <div class="controls">
                            <label class="checkbox"><input type="checkbox" class="t-input" id="optionsCheckboxFocused" value="option1">This is a focused checkbox</label>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
                        <div class="controls">
                            <label class="checkbox">
                                <input type="checkbox" class="t-input" id="optionsCheckbox2" value="option1" disabled="">
                                This is a disabled checkbox
                            </label>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="inputError">Input with error</label>
                        <div class="controls">
                            <input type="text" class="input-validation-error t-input" id="inputError">
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">Save changes</button>
                        <button class="btn">Cancel</button>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</section>